<template>
  <div class="w-100% h-100%">
    <div class="p-20rpx">
      <u-button type="primary" @click="open">
        打开弹窗
      </u-button>
    </div>
    <u-popup
      :show="show"
      @close="close"
      :round="10"
      mode="center"
    >
      <view class="w-570rpx h-700rpx">
        <div class="w-570rpx h-570rpx flex justify-center items-center">
          <qrCode ref="qrRef" />
        </div>
        <u-button class="mt-10rpx" type="primary" @click="changeValue">
          改变二维码内容
        </u-button>
      </view>
    </u-popup>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import qrCode from '@/components/qrcode/qrcode.vue'
const show = ref(false)
const qrRef = ref(null)

const open = async () => {
  show.value = true
  await nextTick()
  qrRef.value.qrFun('www.baidu.com.adsjfowehofheoghwefwoiej')
}
const close = () => {
  show.value = false
  qrRef.value.close()
}
const changeValue = () => {
  qrRef.value.qrFun('大傻逼哈哈')
}
</script>

  <style lang="scss" scoped>

  </style>
